/**
 *  createVNode
 *    作用: 可执行的函数用来创建虚拟dom节点
 *    使用: createVNode(tag,{props},[子节点])
 *  render
 *    作用：把一个生成好的vnode渲染成一个真实的dom节点
 *    使用: render(VNode,挂载节点元素)
 */

// 引入创建虚拟dom的方法
import { createVNode, render } from 'vue'
// 引入组件
import Message from './index.vue'
// 准备一个dom容器 挂载到body上
const div = document.createElement('div')
document.body.appendChild(div)
// 创建一个以 div为tag参数的节点
// const divVNode = createVNode('div', { id: 'test' }, ['this is div'])
// console.log(divVNode)

// 创建一个以 message组件为参数的节点
// const ComVNode = createVNode(Messsage, { type: 'warn', text: 'this is warn' })
// console.log(ComVNode)

// 把divVNode渲染到id为app1的位置
// render(divVNode, document.getElementById('app1'))

// 定时器标识
let timer = null
export function message ({ type, text }) {
  // 实现：根据xtx-message.vue渲染消息提示
  // 1. 导入组件
  // 2. 根据组件创建虚拟节点
  const divNode = createVNode(Message, { type, text })
  // 3. 准备一个DOM容器
  // 4. 把虚拟节点渲染DOM容器中
  render(divNode, div)
  // 5. 开启定时，移出DOM容器内容
  clearTimeout(timer)
  timer = setTimeout(() => {
    // 当给render函数第一个参数为null时,代表将后面这个div中的元素清空
    render(null, div)
  }, 1000)
}
